<template>
  <div class="container">
    <img class="img img1" src="./bg_bjbr044.jpg" alt="" />
    <img class="img img2" src="./bg_bjbr044.jpg" alt="" />
    <img class="img img3" src="./bg_bjbr044.jpg" alt="" />
    <img class="img img4" src="./bg_bjbr044.jpg" alt="" />
    <img class="img img5" src="./bg_bjbr044.jpg" alt="" />
    <img class="img img51" src="./bg_bjbr044.jpg" alt="" />
    <img class="img img52" src="./bg_bjbr044.jpg" alt="" />
    <img class="img img6" src="./bg_bjbr044.jpg" alt="" />
    <br />
    <img class="img ani1" src="./bg_bjbr044.jpg" alt="" />
    <img class="img ani2" src="./bg_bjbr044.jpg" alt="" />
    <img class="img ani3" src="./bg_bjbr044.jpg" alt="" />
    <img class="img ani4" src="./bg_bjbr044.jpg" alt="" />
    <img class="img ani5" src="./bg_bjbr044.jpg" alt="" />
    <img class="img ani6" src="./bg_bjbr044.jpg" alt="" />
    <br />
    <img class="img from1" src="./bg_bjbr044.jpg" alt="" />
    <div class="load-border"></div>
    <div class="imgk"></div>
  </div>
</template>

<script>
  export default {

  }
</script>

<style scoped>
  .container{
    text-align: center;
  }

  .img{
      height:15px;
      width:15px;
      border:1px solid red;
  }

  .img:hover{
      height: 450px;
      width: 450px;
  }

  .load-border {
      width: 120px;
      height: 120px;
      background: url(./bg_bjbr044.jpg) no-repeat center center;
      -webkit-animation: gif 1.4s infinite linear;
      animation: gif 1.4s infinite linear;
  }

  .imgk {
      width: 120px;
      height: 120px;
      background: url(./bg_bjbr044.jpg) no-repeat center center;
      -webkit-animation: gif 1.4s infinite linear;
      animation: mymove 1s infinite linear;
  }

  @keyframes gif {
      0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
      }
      100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
      }
  }
  @keyframes mymove
  {
     0%   {top:0px; background:red; width:100px;}
    100% {top:200px; background:yellow; width:300px;}
  }

  .img1{
      transition: 1s;
  }
  .img2
  {
    transition: 1s height;
  }

  .img3{
    transition: 1s height, 1s width;
  }

  .img4{
    transition: 1s height, 1s 1s width;
  }

  /*逐渐放慢*/
  /*linear：匀速*/
  /*ease-in：加速*/
  /*ease-out: 减速*/
  /*cubic-bezier函数：自定义速度模式*/
  .img5{
    transition: 1s ease;
  }

  .img51{
    transition: 1s ease-out;
  }

  .img52{
    transition:  1s height cubic-bezier(.83,.97,.05,1.44);
  }

  /*完整写法*/
  .img6 {
    transition: 1s 1s height ease;
  }
  /*==*/
  .img6{
    transition-property: height;
    transition-duration: 1s;
    transition-delay: 1s;
    transition-timing-function: ease;
  }

  .ani1:hover{
    animation: 1s rainbow;
  }

  .ani2:hover{
    animation: 1s rainbow infinite;
  }
  .ani3:hover{
    animation: 1s rainbow 2;
  }
  .ani4:hover{
    animation: 1s rainbow forwards;
  }
  .ani5:hover{
    animation: 1s 1s rainbow linear 3 forwards normal;
  }
  .ani5:hover{
    animation-name: rainbow;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-fill-mode:forwards;
    animation-direction: normal;
    animation-iteration-count: 3;
  }
  .ani6{
    animation: 1s rainbow infinite;
    animation-play-state: paused;
  }
  .ani6:hover{
    animation-play-state: running;
  }
  @keyframes rainbow{
    0% { width:20px; height: 20px; border:1px solid red; }
    50% { width:50px; height: 50px; border:2px solid blue; }
    100% { width:100px; height: 100px; border:4px solid peru; }
  }
</style>
